"use client";

import React, { Suspense } from "react";
import { useRouter } from "next/navigation";

export default function SidebarImport() {
  const router = useRouter();

  const onChange = async (e: any) => {
    const fileInput = e.target;

    if (!fileInput.files || fileInput.files.length === 0) {
      console.warn("files list is empty");
      return;
    }

    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append("file", file);
    console.log(file, 'file')

    try {
      const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        console.error("something went wrong");
        return;
      }

      const data = await response.json();
      router.push(`/note/${data.uid}`);
      //虽然在/api/route.ts里：revalidatePath('/','layout')
      //但是客户端还是存在路由缓存  (因为revalidatePath退出路由缓存只在server action里有效)
      //清除路由缓存
      // servre action里：revalidatePath 或者revalidateTag cookie.set 或者cookie.delete
      // 非server action里  route.refresh()
      router.refresh()
    } catch (error) {
      console.error("something went wrong");
    }

    // 重置 file input
    // 有些浏览器,用户选择同一个文件两次，input的onChange不会触发。
    // 这是因为浏览器认为文件没有变化，因此不会触发事件
    // 通过先将 input 的类型改为 text，再改回 file
    // 可以强制清除 input 的值，确保即使用户选择同一个文件，onChange 事件也会被触发。
    e.target.type = "text";
    e.target.type = "file";
  };

  return (
    <div style={{ textAlign: "center", marginBottom: '5px' }}>
      <label htmlFor="file" style={{ cursor: "pointer" }}>
        Import .md File ( APi route mode)
      </label>
      <input
        type="file"
        id="file"
        name="file"
        style={{ position: "absolute", clip: "rect(0 0 0 0)" }}
        onChange={onChange}
        accept=".md"
      />
    </div>
  );
}
